<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伸缩菜单</title>
	<style type="text/css">
    *{margin:0;
     padding:0;
     font-size:13px;
     list-style:none;}

.menu{width:210px;
      margin:50px auto;
      border:1px solid #ccc;}

.menu p{height:25px;
        line-height:25px;
        font-weight:bold;
        background:#eee;
        border-bottom:1px solid #ccc;
        cursor:pointer;
        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
         line-height:24px;
         padding-left:5px;}
</style>
	<script type="text/javascript">
	window.onload=function(){
		var menu=document.getElementById('menu'),
			ps=menu.getElementsByTagName('p'),
			uls=menu.getElementsByTagName('ul');
			for(var i in ps){
				ps[i].id=i;
				ps[i].onclick=function(){
					var ul=uls[this.id];
ul.style.display = (ul.style.display) == "none" ? "block" : "none";
				}
			}
	}
	</script>
</head>
<body>
	<div class="menu" id="menu">
		<div>
			<p>分类一</p>
				<ul>
				  <li><a href="#">链接1</a></li>
				  <li><a href="#">链接2</a></li>
				  <li><a href="#">链接3</a></li>
				  <li><a href="#">链接4</a></li>
				</ul>
		</div>
		<div>
			<p>分类二</p>
				<ul>
				  <li><a href="#">链接1</a></li>
				  <li><a href="#">链接2</a></li>
				  <li><a href="#">链接3</a></li>
				  <li><a href="#">链接4</a></li>
				</ul>
		</div>
		<div>
			<p>分类三</p>
				<ul>
				  <li><a href="#">链接1</a></li>
				  <li><a href="#">链接2</a></li>
				  <li><a href="#">链接3</a></li>
				  <li><a href="#">链接4</a></li>
				</ul>
		</div>
	</div>
</body>
</html>
